<<!DOCTYPE html>
<html>
<head>
	<title>ajax操作</title>
	<script type="text/javascript">
		
	function showHint(str)
	{
		// alert(str);
		if (str.length==0)
		{ 
			document.getElementById("txtHint").innerHTML="";
			return;
		}
		if (window.XMLHttpRequest)
		{
			// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
			xmlhttp=new XMLHttpRequest();
		}
		else
		{	
			//IE6, IE5 浏览器执行的代码
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		//给标签绑定了一个状态改变事件，每当xmlhttp的responseText改变就会调用
		xmlhttp.onreadystatechange=function()
		{

			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","gethint.php?q="+str,true);
		xmlhttp.send();
	}


	function showSite(str)
	{
		// alert("das");
	    if (str=="")
	    {
	        document.getElementById("txtHint").innerHTML="";
	        return;
	    } 
	    if (window.XMLHttpRequest)
	    {
	        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	        xmlhttp=new XMLHttpRequest();
	    }
	    else
	    {
	        // IE6, IE5 浏览器执行代码
	        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }
	    xmlhttp.onreadystatechange=function()
	    {
	        if (xmlhttp.readyState==4 && xmlhttp.status==200)
	        {
	            document.getElementById("ajas").innerHTML=xmlhttp.responseText;
	        }
	    }
	    xmlhttp.open("GET","ajax_mysql.php?q="+str,true);
	    xmlhttp.send();
	}
	</script>
</head>

<body>
  <p><b>在输入框中输入一个姓名:</b></p>
<form> 
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>
<br>
<br>
<br>
<form>
<!-- //onchange与onclick区分 -->
<select name="users" onchange="showSite(this.value)">
<option value="">选择一个网站:</option>
<option value="1">Google</option>
<option value="2">淘宝</option>
<option value="3">菜鸟教程</option>
<option value="4">微博</option>
<option value="5">Facebook</option>
</select>
</form>
<p>返回值: <span id="ajas"></span></p>
</body>
</html>